<template>
  <el-dialog
    v-model="visible"
    :title="$t('team.changeRole')"
    width="500px"
    :before-close="handleClose"
  >
    <div class="change-role-content">
      <!-- 成员信息 -->
      <div class="member-info">
        <el-avatar 
          :size="64"
          :src="member?.avatarUrl"
          :icon="UserFilled"
        >
          {{ member?.nickname?.charAt(0) || member?.username?.charAt(0) }}
        </el-avatar>
        <div class="member-details">
          <h3 class="member-name">{{ member?.nickname || member?.username || `用户${member?.userId}` }}</h3>
          <el-tag 
            :type="getMemberRoleType(member?.role || 'MEMBER')" 
            size="small"
          >
            {{ $t('team.currentRole') }}: {{ getMemberRoleLabel(member?.role || 'MEMBER') }}
          </el-tag>
        </div>
      </div>

      <!-- 角色选择 -->
      <div class="role-selection">
        <h4 class="section-title">{{ $t('team.selectNewRole') }}</h4>
        <div class="role-options">
          <div 
            v-for="role in availableRoles" 
            :key="role.value"
            class="role-option"
            :class="{ 
              'selected': selectedRole === role.value,
              'disabled': !role.available 
            }"
            @click="selectRole(role)"
          >
            <div class="role-icon">
              <el-icon :size="24">
                <component :is="role.icon" />
              </el-icon>
            </div>
            <div class="role-info">
              <div class="role-name">{{ role.label }}</div>
              <div class="role-description">{{ role.description }}</div>
              <div v-if="!role.available" class="role-reason">{{ role.reason }}</div>
            </div>
            <div class="role-selector">
              <el-radio 
                v-model="selectedRole" 
                :value="role.value"
                :disabled="!role.available"
              />
            </div>
          </div>
        </div>
      </div>

      <!-- 权限说明 -->
      <div class="permission-info" v-if="selectedRole && selectedRole !== member?.role">
        <h4 class="section-title">{{ $t('team.rolePermissions') }}</h4>
        <div class="permission-list">
          <div 
            v-for="permission in getRolePermissions(selectedRole)" 
            :key="permission"
            class="permission-item"
          >
            <el-icon class="permission-icon"><Check /></el-icon>
            <span>{{ permission }}</span>
          </div>
        </div>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">{{ $t('common.cancel') }}</el-button>
        <el-button 
          type="primary" 
          @click="handleConfirm"
          :disabled="!selectedRole || selectedRole === member?.role"
          :loading="loading"
        >
          {{ $t('common.confirm') }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'
import {
  UserFilled,
  User,
  Star,
  Management,
  Check
} from '@element-plus/icons-vue'
import { useI18n } from 'vue-i18n'
import type { TeamMember } from '@/types/team'
import { 
  getMemberRoleLabel, 
  getMemberRoleType,
  canUpdateMemberRole 
} from '@/types/team'

interface Props {
  modelValue: boolean
  member: TeamMember | null
  currentUserRole: string
}

interface Emits {
  (e: 'update:modelValue', value: boolean): void
  (e: 'confirm', member: TeamMember, newRole: string): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()
const { t } = useI18n()

// 响应式数据
const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const selectedRole = ref<string>('')
const loading = ref(false)

// 可用角色选项
const availableRoles = computed(() => {
  const roles = [
    {
      value: 'MEMBER',
      label: t('team.member'),
      description: '普通成员，可以查看团队信息和参与协作',
      icon: User,
      available: canUpdateMemberRole(props.currentUserRole, 'MEMBER'),
      reason: !canUpdateMemberRole(props.currentUserRole, 'MEMBER') ? '权限不足' : ''
    },
    {
      value: 'ADMIN',
      label: t('team.admin'),
      description: '管理员，可以管理成员、邀请新成员、管理团队设置',
      icon: Management,
      available: canUpdateMemberRole(props.currentUserRole, 'ADMIN'),
      reason: !canUpdateMemberRole(props.currentUserRole, 'ADMIN') ? '权限不足' : ''
    },
    {
      value: 'OWNER',
      label: t('team.owner'),
      description: '所有者，拥有团队的完全控制权，包括转移所有权和删除团队',
      icon: Star,
      available: props.currentUserRole === 'OWNER' && props.member?.role !== 'OWNER',
      reason: props.currentUserRole !== 'OWNER' ? '只有所有者可以设置' :
              props.member?.role === 'OWNER' ? '请使用转移所有权功能' : ''
    }
  ]

  return roles.filter(role => role.value !== props.member?.role)
})

// 获取角色权限说明
const getRolePermissions = (role: string) => {
  const permissions = {
    MEMBER: [
      '查看团队信息',
      '参与团队协作',
      '查看团队成员'
    ],
    ADMIN: [
      '管理团队成员',
      '邀请新成员',
      '管理团队设置',
      '生成邀请码'
    ],
    OWNER: [
      '完全控制团队',
      '转移所有权',
      '删除团队',
      '管理所有权限'
    ]
  }
  return permissions[role as keyof typeof permissions] || []
}

// 选择角色
const selectRole = (role: any) => {
  if (role.available) {
    selectedRole.value = role.value
  }
}

// 处理确认
const handleConfirm = async () => {
  if (!props.member || !selectedRole.value) return
  
  loading.value = true
  try {
    emit('confirm', props.member, selectedRole.value)
  } finally {
    loading.value = false
  }
}

// 处理关闭
const handleClose = () => {
  selectedRole.value = ''
  visible.value = false
}

// 监听对话框打开
watch(visible, (newVal) => {
  if (newVal) {
    selectedRole.value = ''
  }
})
</script>

<style scoped lang="scss">
.change-role-content {
  .member-info {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--el-bg-color-page);
    border-radius: 8px;
    margin-bottom: 24px;

    .member-details {
      flex: 1;

      .member-name {
        font-size: 18px;
        font-weight: 600;
        color: var(--el-text-color-primary);
        margin: 0 0 8px 0;
      }
    }
  }

  .section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--el-text-color-primary);
    margin: 0 0 16px 0;
  }

  .role-selection {
    margin-bottom: 24px;

    .role-options {
      display: flex;
      flex-direction: column;
      gap: 12px;

      .role-option {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 16px;
        border: 2px solid var(--el-border-color-light);
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover:not(.disabled) {
          border-color: var(--el-color-primary-light-5);
          background: var(--el-color-primary-light-9);
        }

        &.selected {
          border-color: var(--el-color-primary);
          background: var(--el-color-primary-light-9);
        }

        &.disabled {
          opacity: 0.5;
          cursor: not-allowed;
          background: var(--el-bg-color-page);
        }

        .role-icon {
          width: 48px;
          height: 48px;
          border-radius: 8px;
          background: var(--el-color-primary-light-8);
          display: flex;
          align-items: center;
          justify-content: center;
          color: var(--el-color-primary);
        }

        .role-info {
          flex: 1;

          .role-name {
            font-size: 16px;
            font-weight: 600;
            color: var(--el-text-color-primary);
            margin-bottom: 4px;
          }

          .role-description {
            font-size: 14px;
            color: var(--el-text-color-secondary);
            line-height: 1.4;
          }

          .role-reason {
            font-size: 12px;
            color: var(--el-color-danger);
            margin-top: 4px;
          }
        }

        .role-selector {
          flex-shrink: 0;
        }
      }
    }
  }

  .permission-info {
    .permission-list {
      .permission-item {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 0;
        font-size: 14px;
        color: var(--el-text-color-regular);

        .permission-icon {
          color: var(--el-color-success);
          font-size: 16px;
        }
      }
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style>
